<template>
  <div>
    <el-form
      ref="ruleFormRef"
      :model="form"
      :rules="rules"
      :inline="true"
    >
      <el-form-item label="" prop="type">
        <el-select
          v-model="form.type"
          placeholder="请选择"
          @change="changeType(form, index)"
        >
          <el-option
            v-for="typeItem in conditionOptions"
            :key="typeItem.type"
            :disabled="disabledItems.includes(typeItem.type)"
            :label="typeItem.name"
            :value="typeItem.type"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="form.type === 9 || form.type === 10"
        label=""
        prop="calculation"
      >
        <el-select
          v-model="form.calculation"
          placeholder="请选择"
        >
          <el-option
            v-for="calculationItem in calculationList"
            :key="calculationItem.value"
            :label="calculationItem.label"
            :value="calculationItem.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="form.type === 11"
        label=""
        prop="labelIds"
      >
        <el-select
          v-model="form.labelIds"
          multiple
          collapse-tags
          placeholder="请选择"
        >
          <el-option
            v-for="tagItem in tagList"
            :key="tagItem.labelId"
            :label="tagItem.labelName"
            :value="tagItem.labelId"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="form.type !== 11"
        label=""
        prop="number"
      >
        <span
          v-if="form.type !== 9 && form.type !== 10"
        >最近</span>
        <el-input
          v-model="form.number"
          maxlength="3"
          oninput="value=value.replace(/[^\d]/g,'')"
          :placeholder="
            form.type !== 9 && form.type !== 10 ? '请输入1-365' : ''
          "
          style="width: 120px; margin: 0 12px;"
        />
        <span v-if="form.type === 9">次</span>
        <span v-else-if="form.type === 10">元</span>
        <span v-else>天</span>
      </el-form-item>
      <el-form-item
        v-if="showDelete"
        label=""
      >
        <el-icon size="20" color="red" @click="$emit('delete')"><RemoveFilled /></el-icon>
      </el-form-item>
    </el-form>
    {{ formateCondTypeTips(form.type) }}
  </div>
</template>

<script setup>
import { ref, toRefs } from 'vue';
import {
  conditionOptions,
  calculationList
} from './optionsMap.js'
import { formateCondTypeTips } from './condTypeTips.js'

const props = defineProps({
  form: {
    type: Object,
    default: () => ({})
  },
  disabledItems: {
    type: Array,
    default: () => []
  },
  showDelete: {
    type: Boolean,
    default: false,
  }
})

let { form, disabledItems, showDelete } = toRefs(props);
const ruleFormRef = ref();
const rules = {
  type: [{
    required: true,
    message: '请选择筛选特征',
    trigger: 'change',
  },],
  calculation: [{
    required: true,
    message: '请选择条件',
    trigger: 'blur',
  },],
  labelIds: [{
    required: true,
    message: '请选择对应标签',
    trigger: 'change',
  },],
  number: [{
    required: true,
    message: '请输入内容',
    trigger: 'blur',
  },]
}

const emits = defineEmits(['delete', 'changeType'])

function changeType () {
  emits('changeType')
}

function formValidate () {
  return ruleFormRef.value.validate(valid => valid);
}

function resetFields () {
  ruleFormRef.value.resetFields();
}

defineExpose({
  formValidate,
  resetFields
})

</script>

<style lang="scss" scoped>
.el-form{
  margin: 0 0 12px 0;
}
</style>